<template>
  <view>
    <u-navbar
      height="50"
      title="临时存储下单"
      title-size="36"
      back-icon-color="#333"
      title-color="#333"
    ></u-navbar>
    <image class="imageView" src="/static/banner2.png" mode="widthFix"></image>
    <view class="contentBox">
      <view class="contentView">
        <view class="headView">
          <view class="headTitle">下单成功即可获取开柜码</view>
          <view class="headText">
            <u-icon name="/static/xz.png" size="28"></u-icon>
            <text style="margin-left: 5rpx">存放须知</text>
          </view>
        </view>
        <view class="itemListView">
          <view class="itemView" @click="onSelectPickup()">
            <view class="itemTitle">请选择储物柜机</view>
            <view class="itemText">请选择</view>
            <u-icon name="/static/next.png" size="14"></u-icon>
          </view>
          <view class="address" v-if="pickupInfo">{{ pickupInfo.full_address }}</view>
        </view>
        <view class="itemListView">
          <view class="itemView" @click="onSetTime()">
            <view class="itemTitle">请选择存放时间</view>
            <view class="itemText" style="color: #333333" v-if="timeName">{{ timeName }}</view>
            <view class="itemText" v-else>请选择</view>
            <u-icon name="/static/next.png" size="14"></u-icon>
          </view>
        </view>
        <view class="itemListView">
          <view class="itemView">
            <view class="itemTitle">取物手机号</view>
            <input class="itemInput" v-model="form.phone" placeholder="请输入取物手机号" />
          </view>
        </view>
      </view>
    </view>
    <view class="bottomView">
      <view class="checkView" @click="onSelected()">
        <image class="checkIcon" src="/static/selected.png" v-if="isSelected"></image>
        <image class="checkIcon" src="/static/unselected.png" v-else></image>
        <view class="checkText"
          >我已同意<text @click.stop.prevent="onPolicy()">《临时储物服务协议》</text></view
        >
      </view>
      <view class="bottomBtnView">
        <view class="submitView">
          <view class="priceView">费用：¥<text>0.00</text></view>
          <view class="timeText">存放3小时</view>
          <view class="submitBtn" @click="onPostData()">立即下单</view>
        </view>
      </view>
    </view>
    <u-select v-model="timePopup" :list="timeList" @confirm="onTimeConfirm"></u-select>
  </view>
</template>

<script>
export default {
  data() {
    return {
      timePopup: false,
      isSelected: false,
      timeList: [],
      timeName: '',
      pickupInfo: '',
      form: {
        self_pickup_locker_id: '',
        hours: '',
        phone: ''
      }
    }
  },
  onLoad() {
    this.timeList = this.$config.timeList
  },
  methods: {
    onPostData() {
      // setInterimOrderCreate,
      // setInterimUnlock,
      // setInterimPayUnlock,
      // getInterimOrders

      console.log(this)
      // this.$u.api.setInterimOrderCreate().then(res=>{
      // })
    },
    onSelectPickup() {
      this.$utils.route('/other/select-pickup-cabinet/select-pickup-cabinet')
      uni.$on('data', (res) => {
        this.pickupInfo = res
        uni.$off('data')
      })
    },
    onSelected() {
      this.isSelected = !this.isSelected
    },
    onSetTime() {
      this.timePopup = true
    },
    onTimeConfirm(res) {
      this.timeName = res[0].label
      console.log(JSON.stringify(res, null, 2))
    },
    onPolicy() {}
  }
}
</script>

<style>
@import url('temporary-storage.css');

page {
  background: #eeeeef;
}
</style>
